
{{template "header" .}}


<div class="ibox float-e-margins" >
    <div class="row">
        <div class="col-lg-8"></div>
        <div class="col-lg-4"></div>

    </div>

    <div class="row">

        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>同步列表
                    {{if ne .TableName "" }}
                        - TableName: {{.TableName}}
                    {{end}}
                    {{if ne .SchemaName "" }}
                        - SchemaName: {{.SchemaName}}
                    {{end}}</h5>

                    <!--dbname list-->
                    <div style="float: left; margin-top: -10px; margin-left: 10px">
                    <select class="form-control" name="dbname" id="dbname">
                        <option value="" > 数据源 </option>
                        {{range $i, $db := .DbList}}
                            <option value="{{$db.Name}}"> {{$db.Name}} </option>
                        {{end}}
                    </select>
                    </div>
                    <script type="text/javascript">$("#dbname").val("{{.DbName}}")</script>

                    <!--通道-->
                    <div style="float: left; margin-top: -10px; margin-left: 10px;" id="channelid_div">
                        <select class="form-control" name="channelid" id="channelid">
                            <option value="0" > 通道 </option>
                            {{range $chID,$ch := .ChannelList}}
                                <option value="{{$chID}}"> {{$ch.Name}} </option>
                            {{end}}
                        </select>
                    </div>
                    <script type="text/javascript">
                        $("#channelid").val("{{.ChannelID}}");
                        if($("#dbname").val()==""){$("#channelid_div").hide();}
                    </script>

                    <!--toserverkey list-->
                    <div style="float: left; margin-top: -10px; margin-left: 10px">
                        <select class="form-control" name="ToServerKey" id="ToServerKey">
                            <option value="" > 目标库 </option>
                        {{range $key, $toserver := .ToServerKeyList}}
                            <option value="{{$key}}" > {{$toserver.PluginName}} -- {{$key}} </option>
                        {{end}}
                        </select>
                    </div>
                    <script type="text/javascript">$("#ToServerKey").val("{{.ToServerKey}}")</script>

                    <!--toserverkey list-->
                    <div style="float: left; margin-top: -10px; margin-left: 10px">
                        <select class="form-control" name="ToServerKey" id="sync_status">
                            <option value="" > 状态 </option>
                            <option value="nodata" > No Data </option>
                            <option value="running" > Running </option>
                            <option value="error" > Error </option>
                        </select>
                    </div>
                    <script type="text/javascript">$("#sync_status").val("{{.SyncStatus}}")</script>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th></th>
                                <th>DbName</th>
                                <th>SchemaName</th>
                                <th>TableName</th>
                                <th>PluginName</th>
                                <th>ToServerKey</th>
                                <th>Position</th>
                                <th>Status</th>
                                <th>Error</th>
                                <th>ErrorWaitData</th>
                                <th>OP</th>
                            </tr>
                            </thead>
                            <tbody>
                            {{range $i, $toServer := .SyncList}}
                            {{range $k, $v := $toServer.ToServerList}}
                            <tr>
                                <td>{{$i}}-{{$k}}</td>
                                <td>{{$toServer.DbName}}</td>
                                <td>{{$toServer.SchemaName}}</td>
                                <td>{{$toServer.TableName}}</td>
                                <td>{{$v.PluginName}}</td>
                                <td>{{$v.ToServerKey}}</td>
                                <td>
                                    <p title="最后一个成功处理的位点">BinlogNum: {{$v.BinlogFileNum}}</p>
                                    <p>Position : {{$v.BinlogPosition}}</p>
                                    <p title="队列最后一个位点">LastBinlogFileNum: {{$v.LastBinlogFileNum}}</p>
                                    <p title="队列最后一个位点">LastBinlogPosition : {{$v.LastBinlogPosition}}</p>
                                    <p title="内存队列堆积多少条数据待同步">QueueMsgCount: {{$v.QueueMsgCount}}</p>
                                    <p title="非极端情况下,不要手工点击启动文件队列，进行启动">FileQueueStatus: {{$v.FileQueueStatus}}
                                        {{if eq $v.FileQueueStatus false}}
                                            <button data-toggle="button" onclick="fileQueueStart(this,'{{$toServer.DbName}}','{{$toServer.SchemaName}}','{{$toServer.TableName}}',{{$v.ToServerID}},{{$k}})" class="btn-sm btn-primary fileQueueStartBtn" type="button" >启用</button>
                                        {{else}}
                                            <button data-toggle="button" onclick="getFileQueueInfo(this,'{{$toServer.DbName}}','{{$toServer.SchemaName}}','{{$toServer.TableName}}',{{$v.ToServerID}},{{$k}})" class="btn-sm btn-primary" type="button" >文件队列信息</button>
                                        {{end}}
                                    </p>
                                    <div id="{{$toServer.DbName}}_{{$toServer.SchemaName}}_{{$toServer.TableName}}_{{$v.ToServerID}}"></div>
                                </td>
                                <td>
                                    {{$v.Status}}
                                </td>
                                <td>{{$v.Error}}</td>
                                <td>{{$v.ErrorWaitData}}</td>
                                <td>
                                    <p><a href="/db/detail?dbname={{$toServer.DbName}}&schema={{$toServer.SchemaName}}&table_name={{$toServer.TableName}}">
                                    <button data-toggle="button" class="btn-sm btn-primary" type="button" >Detail</button>
                                    </a>
                                    </p>
                                    {{if eq $v.Status "stopped"}}
                                        <p><button data-toggle="button" class="btn-sm btn-primary" type="button" onclick="UpdateTableToServerStatus(this,{{$v.ToServerID}},{{$k}},'start')">Start</button></p>
                                    {{end}}
                                    {{if or (eq $v.Status "running") (eq $v.Status "") }}
                                        <p><button data-toggle="button" class="btn-sm btn-warning" type="button" onclick="UpdateTableToServerStatus(this,{{$v.ToServerID}},{{$k}},'stop')">Stop</button></p>
                                    {{end}}

                                    <p><button data-toggle="button" class="btn-sm btn-danger" type="button" onclick="UpdateTableToServerStatus(this,{{$v.ToServerID}},{{$k}},'del')">Del</button></p>

                                </td>
                            </tr>
                            {{end}}
                            {{end}}
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>
<script type="text/javascript">
    var TableName  = "{{.TableName}}";
    var SchemaName = "{{.SchemaName}}";
    $("#dbname,#channelid,#ToServerKey,#sync_status").change(
        function () {
            GetTableToServerList();
        }
    );

    function GetTableToServerList(){
        var dbname      = $("#dbname").val();
        var channelid   = $("#channelid").val();
        var ToServerKey = $("#ToServerKey").val();
        var sync_status = $("#sync_status").val();
        location.href = "/synclist?dbname="+dbname+"&schema_name="+SchemaName+"&table_name="+TableName+"&toserverkey="+ToServerKey+"&channelid="+channelid+"&sync_status="+sync_status;

    }

    function UpdateTableToServerStatus(obj,ToServerID,index,status){
        var trObjChildren = $(obj).parent().parent().parent().children();
        var dbname = trObjChildren.eq(1).text();
        var schema_name = trObjChildren.eq(2).text();
        var table_name = trObjChildren.eq(3).text();
        var url = "";
        var opName = "";
        switch (status){
            case "stop":
                if (!confirm("确定暂停第 [ "+ index +" ] 条记录？")){
                    return false;
                }
                url = "/table/toserver/stop";
                opName = "暂停";
                break;
            case "del":
                if (!confirm("确定删除第 [ "+ index +" ] 条记录？删除将不能恢复？！！！")){
                    return false;
                }
                url = "/table/toserver/del";
                opName = "删除";
                break;
            case "start":
                url = "/table/toserver/start";
                opName = "启动";
                break;
            default:
                return;
        }
        $.post(url,
                {dbname:dbname,schema_name:schema_name,table_name:table_name,index:index,to_server_id:ToServerID},
                function(data,status){
                    if( status != 'success' ){
                        alert("reqeust error, reqeust status : "+status);
                        return false;
                    }
                    if (!data.status){
                        alert(data.msg);
                        return;
                    }
                    alert(opName+"成功!");
                    GetTableToServerList(schema_name,table_name);
                },
                'json');
    }
</script>

<script src="/js/filequeue.js?v1.2.0-beta.03"></script>

{{template "footer" .}}